/* HTML: <div class="loader"></div> */

#loader {
  position: fixed;
  color: #fff;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2147483647;
  font-size: 14px;

  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-primary) url(./body.svg);
}
#loader .loader--icon {
  width: 64px;
  aspect-ratio: 2;
  --c: linear-gradient(#fde68a 25%, #86efac 0 50%, #fb7185 0 75%, #fde68a 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 400%;
  background-position:
    calc(0 * 100% / 3) 100%,
    calc(1 * 100% / 3) 100%,
    calc(2 * 100% / 3) 100%,
    calc(3 * 100% / 3) 100%;
  background-repeat: no-repeat;
  animation: l10 2s infinite;
  margin: 0 auto 1em;
  border-radius: 10px;
}
@keyframes l10 {
  0% {
    background-position:
      calc(0 * 100% / 3) calc(3 * 100% / 3),
      calc(1 * 100% / 3) calc(3 * 100% / 3),
      calc(2 * 100% / 3) calc(3 * 100% / 3),
      calc(3 * 100% / 3) calc(3 * 100% / 3);
  }
  8.33% {
    background-position:
      calc(0 * 100% / 3) calc(2 * 100% / 3),
      calc(1 * 100% / 3) calc(3 * 100% / 3),
      calc(2 * 100% / 3) calc(3 * 100% / 3),
      calc(3 * 100% / 3) calc(3 * 100% / 3);
  }
  16.67% {
    background-position:
      calc(0 * 100% / 3) calc(2 * 100% / 3),
      calc(1 * 100% / 3) calc(2 * 100% / 3),
      calc(2 * 100% / 3) calc(3 * 100% / 3),
      calc(3 * 100% / 3) calc(3 * 100% / 3);
  }
  25% {
    background-position:
      calc(0 * 100% / 3) calc(2 * 100% / 3),
      calc(1 * 100% / 3) calc(2 * 100% / 3),
      calc(2 * 100% / 3) calc(2 * 100% / 3),
      calc(3 * 100% / 3) calc(3 * 100% / 3);
  }
  30%,
  33.33% {
    background-position:
      calc(0 * 100% / 3) calc(2 * 100% / 3),
      calc(1 * 100% / 3) calc(2 * 100% / 3),
      calc(2 * 100% / 3) calc(2 * 100% / 3),
      calc(3 * 100% / 3) calc(2 * 100% / 3);
  }
  41.67% {
    background-position:
      calc(0 * 100% / 3) calc(1 * 100% / 3),
      calc(1 * 100% / 3) calc(2 * 100% / 3),
      calc(2 * 100% / 3) calc(2 * 100% / 3),
      calc(3 * 100% / 3) calc(2 * 100% / 3);
  }
  50% {
    background-position:
      calc(0 * 100% / 3) calc(1 * 100% / 3),
      calc(1 * 100% / 3) calc(1 * 100% / 3),
      calc(2 * 100% / 3) calc(2 * 100% / 3),
      calc(3 * 100% / 3) calc(2 * 100% / 3);
  }
  58.33% {
    background-position:
      calc(0 * 100% / 3) calc(1 * 100% / 3),
      calc(1 * 100% / 3) calc(1 * 100% / 3),
      calc(2 * 100% / 3) calc(1 * 100% / 3),
      calc(3 * 100% / 3) calc(2 * 100% / 3);
  }
  63%,
  66.67% {
    background-position:
      calc(0 * 100% / 3) calc(1 * 100% / 3),
      calc(1 * 100% / 3) calc(1 * 100% / 3),
      calc(2 * 100% / 3) calc(1 * 100% / 3),
      calc(3 * 100% / 3) calc(1 * 100% / 3);
  }
  75% {
    background-position:
      calc(0 * 100% / 3) calc(0 * 100% / 3),
      calc(1 * 100% / 3) calc(1 * 100% / 3),
      calc(2 * 100% / 3) calc(1 * 100% / 3),
      calc(3 * 100% / 3) calc(1 * 100% / 3);
  }
  83.33% {
    background-position:
      calc(0 * 100% / 3) calc(0 * 100% / 3),
      calc(1 * 100% / 3) calc(0 * 100% / 3),
      calc(2 * 100% / 3) calc(1 * 100% / 3),
      calc(3 * 100% / 3) calc(1 * 100% / 3);
  }
  91.67% {
    background-position:
      calc(0 * 100% / 3) calc(0 * 100% / 3),
      calc(1 * 100% / 3) calc(0 * 100% / 3),
      calc(2 * 100% / 3) calc(0 * 100% / 3),
      calc(3 * 100% / 3) calc(1 * 100% / 3);
  }
  97%,
  100% {
    background-position:
      calc(0 * 100% / 3) calc(0 * 100% / 3),
      calc(1 * 100% / 3) calc(0 * 100% / 3),
      calc(2 * 100% / 3) calc(0 * 100% / 3),
      calc(3 * 100% / 3) calc(0 * 100% / 3);
  }
}

/* 内容区域 */
#loader > .loader--content {
  text-align: center;
}
/* 加载等待提示文本 */
#loader .app-version {
  font-weight: normal;
  font-style: italic;
  font-size: 0.9em;
  opacity: 0.7;
}
#loader .loader--message {
  padding: 0 1em;
}
#loader .loader--timeout {
  color: var(--theme-danger);
  transform: scale(0);
  max-width: 280px;
  margin-top: 0.5em;
  pointer-events: all;
}
/* 超时后显示的内容 */
#loader.timeout .loader--timeout {
  transition: all 0.2s;
  transform: scale(1);
}
#loader.timeout .loader--timeout:hover {
  transform: translateY(-0.25em) scale(1);
}

/* Loaded */
body.loaded #loader {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition:
    all 0.2s 1s ease-out,
    color 0.45s;
  transition:
    all 0.2s 1s ease-out,
    color 0.45s;
}

/* 正常加载完成情况下将不显示此按钮，即使超时检测时间已结束 */
body.loaded #loader .loader--timeout {
  opacity: 0;
  transform: scale(0);
  transition: none;
}
